<template>
  <div>
    <div class="breadcrumbs">
      <span>{{ $t('menu.Portfolio') }}</span>
    </div>
    <div class="right-body">
      <div class="tab-title">
        <div class="item" :class="{'active':tabIndex===0}" @click="changeTab(0)">
          {{ $t('notice.allocation') }}
        </div>
        <div class="item" :class="{'active':tabIndex===1}" @click="changeTab(1)">
          {{ $t('notice.notification') }}
        </div>
      </div>
      <div class="tab-con clearfix">
        <div v-show="tabIndex===0" class="con-item ">
          <div class="allocationBox">
            <h1 class="list-title">{{ $t('notice.allocation') }}</h1>
            <div class="list-table-box">
              <table v-if="noticeData.allocation.length>0">
                <thead>
                <tr>
                  <td>{{ $t('notice.no') }}</td>
                  <td>{{ $t('notice.date') }}</td>
                  <td>{{ $t('notice.name') }}</td>
                  <td>{{ $t('notice.state') }}</td>
                  <td>{{ $t('notice.allocation') }}</td>
                  <td>{{ $t('notice.claimed') }}</td>
                  <td>{{ $t('notice.action') }}</td>
                  <td>{{ $t('notice.addToken') }}</td>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,index) in noticeData.allocation" :key="index">
                  <td>{{ item.id }}</td>
                  <td>{{ item.datetime }}</td>
                  <td>{{ item.name }}</td>
                  <td v-if="item.state === 0" >
                    {{ $t('menu.oncoming') }}
                  </td>
                  <td v-else-if="item.state===1" >
                    {{ $t('menu.active') }}
                  </td>
                  <td v-else-if="item.state===2">
                    {{$t('menu.completed')}}
                  </td>
                  <td>{{ item.pay }}</td>
                  <td>{{ item.point }}</td>
                  <td>
                    <span class="table-token" @click="handleToken(item)" :class="{'active':item.is_draw===1,'disabled':item.is_draw!==1}" >{{$t('claimToken') }}</span>
                  </td>
                  <td>
                          <span class="table-add" >
                            <img src="@/assets/images/token.png" alt=""/>
                            +{{ $t('notice.addToken') }}
                          </span>
                  </td>
                </tr>
                </tbody>
              </table>
              <empty v-else :description="$t('notData')"></empty>
            </div>
          </div>
        </div>
        <div v-show="tabIndex===1" class="con-item">
          <div class="noticeListBox">
            <h1 class="list-title">{{ $t('notice.notification') }}</h1>
            <ul v-if="noticeData.notifications.length>0">
              <li class="item item1" :class="{'selected':item.showMore}"
                  v-for="(item,index) in noticeData.notifications" :key="index">

                <div class="item-top">
                  <div class="top-tt">
                    <img :src="item.is_read?readImg0:readImg" alt=""/>
                    <span>
                           {{ item.title }}
                    </span>
                  </div>
                  <div class="notice-list-right">
                    <span class="time" @click="showMore(item)">{{ item.datetime }} <span>
                            <img src="@/assets/images/down.png" alt=""/>
                    </span></span>

                  </div>
                </div>
                <div class="item-bottom">
                  <p v-html="item.content">
<!--                    {{ item.content }}-->
                  </p>
                  <h1 v-show="!item.showMore">
                    <a href="#" @click="showMore(item)" >View more</a>
                  </h1>
                </div>

              </li>
            </ul>
            <empty v-else :description="$t('notData')"></empty>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <!-- 分页 -->
    <div class="pagination-box">
      <el-pagination
          layout="prev, pager, next"
          :current-page.sync="pageIndex"
          @current-change="loadPage"
          :page-size="pageSize"
          :total="pageTotal">
      </el-pagination>
    </div>
    <withdraw-card v-if="showWidthCard" @close="showWidthCard=false" :state="itemSate"></withdraw-card>
  </div>
</template>

<script>
import {getExchange, getNoticeList, readNotice, withDraw} from "@/requests/api";
import {Message,Empty} from "element-ui";
import withdrawCard from "@/components/project/withdrawCard.vue";

export default {
  name: `noticeList`,
  components:{
    Empty,
    withdrawCard
  },
  data() {
    return {
      showWidthCard: false,
      itemSate:0,
      tabIndex: 0,
      noticeData: {
        allocation: [],
        notifications: []
      },
      pageIndex: 1,
      pageSize: 5,
      pageTotal: 40,
      readImg:require('@/assets/images/noticeli1.png'),
      readImg0:require('@/assets/images/noticeli.png')
    };
  },
  mounted() {
    const {id} = this.$route.query
    if (id) {
      this.tabIndex = 1;
      this.changeTab(1)
    }
    if (this.$store.state.wallet) {
      this.getExChangeList()
    } else {
      Message.warning(this.$t('dialog.pleaseConnectWallet'))
      this.$router.history.go(-1)
    }

  },
  methods: {
    changeTab(index) {
      this.tabIndex = index;
      this.pageIndex = 1;
      this.noticeData = {
        allocation: [],
        notifications: []
      }
      switch (this.tabIndex) {
        case 0:
          this.getExChangeList()
          break;
        case 1:
          this.getNotifications()
          break;
      }
      console.log('初始化分页')
    },
    handleToken(item){
      if (item.is_draw===0){
        this.itemSate = 2
        this.showWidthCard = true
        return
      }

      withDraw({id:item.id}).then((r)=>{
        const {resultCode} = r
        if (resultCode===0){
          this.itemSate = 1
          this.showWidthCard = true
        }
        else {
          this.itemSate = 2
          this.showWidthCard = true
        }

      }).catch(e=>{
        console.log(e);
        this.itemSate = 2
        this.showWidthCard = true
      })

    },
    getExChangeList() {
      getExchange({
        pageindex: this.pageIndex,
        pagesize: this.pageSize
      }).then(r => {
        const {data} = r;
        const {exchange,total} = data
        this.noticeData.allocation = []
        console.log(exchange, data)
        this.noticeData.allocation = exchange
        this.pageTotal =total
      })
    },
    getNotifications() {
      getNoticeList({
        pageindex: this.pageIndex,
        pagesize: this.pageSize
      }).then(r => {
        const {data} = r;
        const {notifications,total} = data
        this.noticeData.notifications = []
        console.log(this.noticeData.notifications)
        this.noticeData.notifications = notifications.map(r => {
          return {
            ...r,
            showMore: false
          }
        });
        this.pageTotal =total
        // console.log(data)
      })
    },
    loadPage(index) {
      this.pageIndex = index;
      switch (this.tabIndex) {
        case 0:
          this.getExChangeList()
          break;
        case 1:
          this.getNotifications()
          break;
      }
    },
    readNotifications(notice_id) {
      readNotice({notice_id}).then(r => {
        console.log(r);
      })
    },
    showMore(item) {
      // console.log(item)
      item.showMore = !item.showMore
      if (!item.is_read) {
        this.readNotifications(item.id)
        item.is_read = 1
      }
      // console.log(item)
    }
  }
}
</script>

<style scoped>
.show {
  display: block;
}


/*带背景的分页按钮背景色end*/
::v-deep .el-pager {
  border: 1px solid #dddddd;
  border-radius: 5px;
  overflow: hidden;
}

::v-deep .el-pager li {
  border-right: 1px solid #dddddd;
}

::v-deep .el-pager li:last-child {
  border-right: none;
}

/*不带背景的分页按钮背景色begin*/
::v-deep .el-pager li.active {
  color: white;
  cursor: default;
  background-color: #67c04d;

}

::v-deep .el-pagination .el-pager li:hover {
  color: #67c04d;
}

::v-deep .el-pagination .el-pager li:not(.disabled):hover {
  color: #0ec008;
}
.disabled{
  pointer-events: none;
  cursor: not-allowed;
}
</style>
